<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品分类管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<!-- toastr -->
	<script type="text/javascript" src="/js/toastr/toastr.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/toastr/toastr.css"/>
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
<div class="box-header with-border">
	<h3 class="box-title">商品分类管理
	</h3>
</div>

<div class="box-body">
	<!-- 面包屑 -->
	 <ol class="breadcrumb" id="olId">
		<li>
			<a id="1" href="/itemCat/toItemCatList" value="0">顶级分类列表</a>
		</li>
	</ol>

	<!-- 数据表格 -->
	<div class="table-box">
		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" onclick="toAdd()"><i class="fa fa-file-o"></i>新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="delItemCatById()"><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="刷新" ><i class="fa fa-check"></i> 刷新</button>
				</div>
			</div>
		</div>


	<!--数据列表-->
	  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
		  <thead>
			  <tr>
				  <th class="" style="padding-right:0px">
					  <input type="checkbox" class="icheckbox_square-blue">
				  </th>
				  <th class="sorting_asc">分类ID</th>
				  <th class="sorting">分类名称</th>
				  <th class="sorting">类型模板ID</th>

				  <th class="text-center">操作</th>
			  </tr>
		  </thead>
		  <tbody id="tableId">
			  <tr th:each="itemCat : ${itemCats}">
				  <td><input type="checkbox"></td>
				  <td>[[${itemCat.id}]]</td>
				  <td>[[${itemCat.name}]]</td>
				  <td>[[${itemCat.typeId}]]</td>
				  <td class="text-center">
					  <button type="button" class="btn bg-olive btn-xs" onclick="findSubordinateInfo(this)">查询下级</button>
					  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdate(this)">修改</button>
				  </td>
			  </tr>
		  </tbody>
	  </table>
		  <!--数据列表/-->
	</div>
	<!-- 数据表格 /-->




 </div>
<!-- /.box-body -->
              
                                
<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品分类新建</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
				<tr>
		      		<td>上级商品分类</td>
		      		<td name="parentId"><!--珠宝 >>  银饰--></td>
		      	</tr>
		      	<tr>
		      		<td>商品分类名称</td>
		      		<td><input  class="form-control" placeholder="商品分类名称" id="nameId">  </td>
		      	</tr>			  
		      	<tr>
		      		<td>类型模板</td>
		      		<td>	      		
		      			<select style="width: 100%" class="form-control">
							<option th:each="tt : ${tts}" th:value="${tt.id}">[[${tt.name}]]</option>
						</select>
		      		</td>		      		      		
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addItemCat()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>


  <!-- 修改窗口 -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="updateModalLabel">修改商品分类</h3>
			  </div>
			  <div class="modal-body">

				  <table class="table table-bordered table-striped"  width="800px" id="updateTable">
					  <tr>
						  <td>上级商品分类</td>
						  <td name="parentId"><!--珠宝 >>  银饰--></td>
					  </tr>
					  <tr>
						  <td>商品分类名称</td>
						  <td id="nameIdTwo">
							  <input  class="form-control" placeholder="商品分类名称" id="nameId2">
							  <input type="hidden" id="itemCatId">
						  </td>
					  </tr>
					  <tr>
						  <td>类型模板</td>
						  <td id="typeId">
							  <select style="width: 100%" class="form-control">
								  <option th:each="tt : ${tts}" th:value="${tt.id}">[[${tt.name}]]</option>
							  </select>
						  </td>
					  </tr>

				  </table>

			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateItemCat()">修改</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>
</body>
<script>
	//获取下级信息
	function findSubordinateInfo(obj){
		//获取当前行的id
		var tr = $(obj).parent().parent();
		var tds = tr.children();
		var id = tds.eq(1).html();
		var name = tds.eq(2).html();
		$.ajax({
			url:"/itemCat/getItemCatByParentId",
			type:"post",
			dataType:"json",
			data:{pid:id},
			async:false,
			success:function(result){
				//获取查询的信息集合
				var itemCats = result.data;
				var parentId;
				var info = '';
				$(itemCats).each(function(i,e){
					info += '<tr><td><input type="checkbox"></td><td>'+e.id+'</td><td>'+e.name+'</td><td>'+e.typeId+'</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs" onclick="findSubordinateInfo(this)">查询下级</button><button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdate(this)">修改</button></td></tr>';
					parentId = e.parentId;
				})
				$("#tableId").html(info);
				$("#olId").append('<li><a href="javascript:#" id="'+id+'" onclick="getParentInfo(this,'+id+')">'+name+'</a></li>');
			},
			error:function(){
				alert("系统异常");
			}
		})
	}

	//面包屑，点击面包屑获取该级别下所有的子分类
	function getParentInfo(obj,id){
		//点击某面包屑后删除当前面包屑li后面所有的li
		$(obj).parent().nextAll().remove();

		$.ajax({
			url:"/itemCat/getItemCatByParentId",
			type:"post",
			dataType:"json",
			data:{pid:id},
			async:false,
			success:function(result){
				//获取查询的信息集合
				var itemCats = result.data;
				var parentId;
				var info = '';
				$(itemCats).each(function(i,e){
					info += '<tr><td><input type="checkbox"></td><td>'+e.id+'</td><td>'+e.name+'</td><td>'+e.typeId+'</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs" onclick="findSubordinateInfo(this)">查询下级</button><button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdate(this)">修改</button></td></tr>';
					parentId = e.parentId;
				})
				$("#tableId").html(info);
			},
			error:function(){
				alert("系统异常");
			}
		})
	}

	//初始化增加商品分类页所需数据
	function toAdd(){
		//获取ol标签下面所有的li标签
		var lis = $("#olId").children();
		//遍历拼接当前所在的级别
		var names = "";
		$(lis).each(function(){
			names += $(this).eq(0).find("a").html() + " > ";

		})
		//把获取到的当前级别名称写入到增加页面中
		$("[name=parentId]").html(names);
	}

	//增加商品分类
	function addItemCat(){
		//获取当前所在页面是哪个分类的下面 获取他的id就可以添加了
		//获取ol标签中最后一个li
		var lastLi = $("#olId").children("li:last-child");
		var aElament = $(lastLi).eq(0).find("a");
		//获取a标签的id值 在添加的时候 这个id值就代表当前分类级别的主键id
		var parentId = $(aElament).attr("id");

		//获取用户选中的类型模板id
		var optionObj = $("option:checked");
		var typeId = $(optionObj).val();

		$.ajax({
			url:"/itemCat/addItemCat",
			type:"post",
			dataType:"json",
			data:{parentId:parentId,name:$("#nameId").val(),typeId:typeId},
			async:false,
			success:function(result){
				toastr.success("添加成功");
				//刷新
				refreshTable(parentId);
			},
			error:function(){
				toastr.error("添加失败");
			}
		})
	}

	//刷新table表格 用于增加 删除 修改成功后调用
	function refreshTable(){
		//获取当前所在页面是哪个分类的下面
		//获取ol标签中最后一个li
		var lastLi = $("#olId").children("li:last-child");
		var aElament = $(lastLi).eq(0).find("a");
		//获取a标签的id值 在添加的时候 这个id值就代表当前分类级别的主键id
		var parentId = $(aElament).attr("id");

		$.ajax({
			url:"/itemCat/getItemCatByParentId",
			type:"post",
			dataType:"json",
			data:{pid:parentId},
			async:false,
			success:function(result){
				//获取查询的信息集合
				var itemCats = result.data;
				var info = '';
				$(itemCats).each(function(i,e){
					info += '<tr><td><input type="checkbox"></td><td>'+e.id+'</td><td>'+e.name+'</td><td>'+e.typeId+'</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs" onclick="findSubordinateInfo(this)">查询下级</button><button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdate(this)">修改</button></td></tr>';
				})
				$("#tableId").html(info);
			},
			error:function(){
				alert("系统异常");
			}
		})
	}

	//删除商品分类
	function delItemCatById(){
		//获取选中的模板id复选框
		var checkedTt = $("input[type=checkbox]:checked");
		var ids = [];//选中要删除的分类模板id数组
		$(checkedTt).each(function(i,e){	//获取每个checked的input元素
			//获取他父节点td
			var tdParent = $(e).parent();
			//获取当前节点的下一个兄弟节点
			var tdNext = tdParent.next();
			//获取当前节点中的值
			var id = tdNext.html();
			ids.push(id);
		})
		console.log(ids);
		if(ids.length <= 0){
			toastr.warning("请选择需要删除的分类模板");
			return;
		}

		$.ajax({
			url:"/itemCat/deleteBatchItemCatByIds",
			type:"post",
			dataType:"json",
			data:{ids:ids},
			async:false,
			success:function(){
				toastr.success("删除成功");
				//刷新
				refreshTable();
			},
			error:function(){
				toastr.error("删除失败");
			}
		})
	}

	//初始化修改页面数据
	function toUpdate(obj){
		//获取当前点击的tr元素
		var tr = obj.parentNode.parentNode;
		//获取tr下面所有的子元素
		var tds = $(tr).children();
		//当前分类id
		var id = tds.eq(1).html();
		$("#itemCatId").val(id);
		//获取当前分类名称
		var name = tds.eq(2).html();
		//获取当前分类的类型模板id
		var typeId = tds.eq(3).html();

		//获取ol标签下面所有的li标签
		var lis = $("#olId").children();
		//遍历拼接当前所在的级别
		var names = "";
		$(lis).each(function(){
			names += $(this).eq(0).find("a").html() + " > ";

		})
		//把获取到的当前级别名称写入到修改页面中
		$("[name=parentId]").html(names);
		//将名称写入到修改页面input框
		$("#nameId2").val(name);

		$.ajax({
			url:"/itemCat/getItemCatById",
			type:"post",
			dataType:"json",
			data:{id:id},
			async:false,
			success:function(result){
				console.log(result.data);
			},
			error:function(){
				toastr.error("失败");
			}
		})
	}

	function updateItemCat(){
		//获取id
		var id = $("#itemCatId").val();
		//名称
		var name = $("#nameId2").val();
		//选中的类型模板
		//获取用户选中的类型模板id
		var optionObj = $("option:checked");
		var typeId = $(optionObj).val();

		$.ajax({
			url:"/itemCat/updateItemCatById",
			type:"post",
			dataType:"json",
			data:{id:id,name:name,typeId:typeId},
			async:false,
			success:function(){
				toastr.success("修改成功");
				//刷新
				refreshTable();
			},
			error:function(){
				toastr.error("系统异常");
			}
		})
	}


</script>
</html>